<template>
  <el-dialog
    draggable
    overflow
    :title="'回潮检测'"
    v-model="visible"
    :width="1000"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <sk-tabs type="border-card">
      <el-tab-pane ref="tab" label="基础信息">
        <el-form
          :model="form"
          :rules="rules"
          ref="dialogForm"
          label-width="80px"
          label-position="right"
        >
          <el-row>
            <el-col>
              <el-row>
                <el-col :span="5">
                  <el-form-item label="往来" prop="company_id">
                    <el-input
                      v-model="formStorage.company.name"
                      readonly
                      class="readonly"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="产品" prop="material_id">
                    <el-input
                      v-model="formStorage.material.name"
                      readonly
                      class="readonly"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="检验人" prop="creator_id">
                    <el-input
                      v-model="formStorage.creator.name"
                      readonly
                      class="readonly"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="4">
                  <el-form-item label="形态" prop="type_id">
                    <el-input v-model="formStorage.type.name" readonly class="readonly">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="批号" prop="lot_id">
                    <el-input v-model="formStorage.lot_name" readonly class="readonly">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="10">
              <div>
                <sc-VxeTable
                  ref="xGrid1"
                  :gridEvts="gridEvents"
                  :gridOps="gridOps"
                  :data="form.details"
                  :tablecode="'storageActionPurchaseCheckhc'"
                >
                </sc-VxeTable>
              </div>
            </el-col>
            <el-col :span="14">
              <el-row justify="center">
                <el-col :span="12">
                  <el-form-item label="每包个数" prop="perhank">
                    <el-input
                      label="每包个数"
                      @input="computHank"
                      v-model="form.perhank"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="总个数" prop="hank">
                    <el-input
                      label="总个数"
                      v-model="form.hank"
                      readonly
                      class="readonly"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="毛重(Kg/包)" prop="gross">
                    <el-input v-model="form.gross" readonly class="readonly"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="皮重(Kg/包)" prop="tare">
                    <el-input
                      v-model="form.tare"
                      placeholder="可手动更改"
                      class="input-with-select"
                    >
                      <template #prepend>
                        <skDicSelect
                          v-model="form.tare"
                          :valueEqKey="false"
                          :code="'tare'"
                        >
                        </skDicSelect>
                      </template>
                      <template #append>
                        <span class="red">皮重</span>
                      </template>
                    </el-input>
                  </el-form-item> </el-col
                ><el-col :span="12">
                  <el-form-item label="实际回潮" prop="measured_resurgence">
                    <el-input v-model="form.measured_resurgence">
                      <template #append><span class="red">%</span></template></el-input
                    >
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="标准回潮" prop="standard_resurgence">
                    <el-input v-model="form.standard_resurgence" readonly class="readonly"
                      ><template #append><span class="red">%</span></template></el-input
                    >
                  </el-form-item> </el-col
                ><el-col :span="12">
                  <el-form-item label="净重(Kg/包)" prop="suttle_weight">
                    <el-input v-model="form.suttle_weight" readonly class="readonly"
                      ><template #append>
                        <el-input
                          v-model="form.odd"
                          class="readwrite"
                          placeholder="填写零头"
                        ></el-input></template
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="标重(Kg/包)" prop="indicated_weight">
                    <el-input
                      v-model="form.indicated_weight"
                      readonly
                      class="readonly"
                    ></el-input>
                  </el-form-item> </el-col
                ><el-col :span="12">
                  <el-form-item label="每吨包数" prop="packets_number">
                    <el-input v-model="form.packets_number"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="总标重" prop="total_indicated_weight">
                    <el-input
                      v-model="form.total_indicated_weight"
                      readonly
                      class="readonly"
                    ></el-input>
                  </el-form-item> </el-col
                ><el-col :span="12">
                  <el-form-item label="打包绞数" prop="prohank">
                    <el-input v-model="form.prohank"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="检测结果" prop="result_id">
                    <el-radio-group v-model="form.result_id">
                      <el-radio :label="1">合格</el-radio>
                      <el-radio :label="-1">不合格</el-radio>
                    </el-radio-group>
                  </el-form-item> </el-col
                ><el-col :span="24">
                  <el-form-item label="备注" prop="remark">
                    <el-input label="搬运工" v-model="form.remark"></el-input>
                  </el-form-item>
                </el-col> </el-row
            ></el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </sk-tabs>

    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()">保存</el-button>
    </template>
  </el-dialog>
</template>

<script>
import XEUtils from "xe-utils";
import skDicSelect from "@/components/skDicSelect";
import skAutoChoose from "@/components/skAutoChoose";
import { ElMessageBox } from "element-plus";
export default {
  emits: ["success", "closed"],
  components: { skDicSelect, skAutoChoose },
  data() {
    return {
      openChoose: { order: false },
      gridEvents: {
        removeRow: async (param) => {
          const type = await ElMessageBox.confirm("您确定要删除该数据?");
          if (type === "confirm") {
            let res = param.$grid.removeCheckboxRow();
            this.computAva(param.$grid.getTableData().tableData);
            return res;
          }
        },
      },
      gridOps: {
        height: 350,
        proxyConfig: null,
        editConfig: { trigger: "click" },
        columns: [
          {
            field: "gross",
            event: {
              keyup: (param) => {
                this.computAva(param.params.data);
              },
            },
          },
        ],
      },
      formStorage: {
        creator: {},
        company: {},
        type: {},
        material: {},
      },
      form: {
        id: "",
        details: [],
        attachments: [],
      },

      rules: {
        // billdate: [{ required: true, message: "请输入型号规格" }],
      },
      visible: false,
      isSaveing: false,
    };
  },
  updated() {},
  watch: {
    "form.tare": {
      handler() {
        this.computSuttleWeight();
      },
      immediate: true,
    },
    "form.gross": {
      handler() {
        this.computSuttleWeight(); //计算净重
      },
      immediate: true,
    },
    "form.measured_resurgence": {
      handler() {
        this.computIndicatedWeight(); //计算包回潮
      },
      immediate: true,
    },
    "form.suttle_weight": {
      handler() {
        this.computIndicatedWeight(); //计算包回潮
      },
      immediate: true,
    },
    "form.indicated_weight": {
      handler() {
        this.computTotalIndicatedWeight(); //计算吨标重
      },
      immediate: true,
    },
    "form.packets_number": {
      handler() {
        this.computTotalIndicatedWeight(); //计算吨标重
      },
      immediate: true,
    },
    "form.fect_auxiliary_quantity": {
      handler() {
        this.computHank();
      },
      immediate: true,
    },
    "form.total_indicated_weight": {
      handler() {
        this.checkResult(); //检验结果
      },
      immediate: true,
    },
  },
  methods: {
    //显示
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;

      return this;
    },
    //检验结果
    checkResult() {
      if (
        XEUtils.toNumber(this.form.total_indicated_weight) >=
        XEUtils.toNumber(this.form.standard_weight)
      ) {
        this.form.result_id = 1;
      } else {
        this.form.result_id = -1;
      }
    },

    //计算平均重
    computAva(param) {
      let sum = XEUtils.sum(param, "gross");
      let count = param.length;
      if (count > 0) {
        this.form.gross = XEUtils.toFixed(sum / count, 2);
      }
    },
    //计算绞数
    computHank() {
      this.form.hank = XEUtils.toInteger(
        XEUtils.toNumber(this.form.perhank) *
          XEUtils.toNumber(this.form.fect_auxiliary_quantity)
      );
    },
    //计算净重
    computSuttleWeight() {
      this.form.suttle_weight = XEUtils.toFixed(
        XEUtils.toNumber(this.form.gross) - XEUtils.toNumber(this.form.tare),
        2
      );
    },
    //计算标重包
    computIndicatedWeight() {
      this.form.indicated_weight = XEUtils.toFixed(
        XEUtils.toNumber(this.form.suttle_weight) * this.computRat(),
        2
      );
    },
    //计算吨标重
    computTotalIndicatedWeight() {
      this.form.total_indicated_weight = XEUtils.toFixed(
        XEUtils.toNumber(this.form.indicated_weight) *
          XEUtils.toNumber(this.form.packets_number),
        2
      );
    },
    //计算缩率
    computRat() {
      return (
        (1 + XEUtils.toNumber(this.form.standard_resurgence) / 100) /
        (1 + XEUtils.toNumber(this.form.measured_resurgence) / 100)
      );
    },

    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          var res = await this.$API.storage.moisture.saveFromStorage.post(this.form);
          this.isSaveing = false;
          if (res.code == 200) {
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success("操作成功");
          } else {
            this.$alert(res.message, "提示", { type: "error" });
          }
        }
      });
    },
    async getItems(id) {
      this.isSaveing = true;
      var res = await this.$API.storage.moisture.info.get({
        filter: [{ lot_id: id }],
      });
      if (res.data != "") Object.assign(this.form, res.data);
      else {
        this.form.standard_resurgence = this.formStorage.material.standard_resurgence;
        this.form.lot_id = this.formStorage.lot_id;
      }
    },
    //表单注入数据
    setData(data) {
      Object.assign(this.formStorage, this.$TOOL.removeNull(data));
      this.getItems(data.lot_id);
      this.isSaveing = false;
    },
  },
};
</script>

<style>
.el-input-group__prepend,
.el-input-group__append {
  padding: 0;
  background-color: var(--el-fill-color-blank);
}

.el-input-group__prepend .el-select {
  margin: 0px;
  border: 0px;
}

.readonly div {
  background-color: #f0efef;
}

.readwrite div {
  background-color: #ffffff;
}

.red {
  color: #f56c6c;
  min-width: 24px;
  text-align: center;
}

.inputdata {
  background-color: #fbebeb;
  padding-bottom: 10px;
}

.inputdata .el-form-item--small {
  margin-bottom: 5px;
}
</style>
